<template>
  <view class="studentList commonDiv">
    <u-navbar
      leftText="返回"
      title="学生列表"
      :safeAreaInsetTop="true"
      @leftClick="backPre"
      >
        <view
          class="u-nav-slot"
          slot="right"
          @click="backTo"
        >
        <view class="icon iconfont icon-shouye" style="font-weight: 600;"></view>
      </view>
    </u-navbar>
    <view class="top">
      <view class="search-top">
        <view class="inner">
          <view class="inner-box">
            姓名：
            <u--input
              placeholder="请输入姓名"
              v-model="searchForm.name"
            ></u--input>
          </view>
        </view>
        <view class="inner">
          <view class="inner-box">
           <u-button  text="清空" style="width: 100px;margin: 0 10px;"  @click="clearHandle"></u-button>
            <u-button type="primary" text="搜索" style="width: 100px;margin: 0 0 0 10px;" @click="searchHandle"></u-button>
          </view>
        </view>
      </view>
    </view>
    <view class="bot">
      <ua-table
        :columns="column"
        :data="data"
        :stripe="true"
        :border="true"
        :headerBold="true"
        headerBgColor="#f3f6f9"
        headerColor="#333"
        size='14px'
        height="calc(100vh - 140px)"
        style="border:1px solid #eee"
      >
        <!-- <template #default="{row, col, index}">
          <block v-if="col.slot == 'btns'">
            <text style="color: #09f;text-decoration: underline;" >编辑</text>
            <view style="margin: 0 2px;"></view>
            <text style="color: #09f;text-decoration: underline;" @click.stop="handleDel(row, index)">删除</text>
          </block>
        </template> -->
      </ua-table>
      <view class="page-box">
        <page-pagination class="test-pagination" :numAround="true" :total="page.total" layout="page,prev,next,limit,total"
          :pageSizes="[20,50,100,500]" :pageSize="page.limit" @sizeChange="sizeChange" color="#00796B">
        </page-pagination>
      </view>
    </view>
  </view>
</template>
<script>
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default{
  data(){
    return{
      searchForm: {
        name: ''
      },
      page:{
        limit: 20,
        page: 1,
        total: 0
      },
      column:[
        { type:'index', align: 'center', fixed:true,width:70 },
        { prop: 'name', label: '姓名', align: 'center', fixed:true, width:120,},
        { prop: 'number', label: '学号', align: 'center', width: 140},
        { prop: 'sex', label: '性别', width:90, align: 'center'},
        { prop: 'year', label: '入学年份', width:110, align: 'center'},
        { prop: 'grade', label: '年级', width:110, align: 'center'},
        { prop: 'classs', label: '班级', width:110, align: 'center'},
        { prop: 'birthday', label: '年龄', width:90, align: 'center'},
        { prop: 'idCard', label: '身份证号', width:160,align: 'center'},
        // { prop: 'address', label: '家庭住址', width:200, align: 'center'},
        { prop: 'school', label: '学校', width: 200, align: 'center',},
        // {slot: 'btns', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作
      ],
      data:[]   
    }
  },
  methods:{
    backPre(){
      uni.navigateBack({
        delta: 1 // delta值为1时表示返回上一级页面
      })
    },
    backTo(){
      uni.reLaunch({
        url: '/pages/home/index'
      })
    },
     handleLongPress(row ,index,column) {
      console.log(row)
      console.log(index,column)
      console.log(row[column.name])
      uni.setClipboardData({
        data: row[column.name],
        success: () => {
          console.log('复制成功');
          // 可以添加用户提示复制成功
        },
        fail: () => {
          console.log('复制失败');
          // 可以添加用户提示复制失败
        }
      });
      return
      // 获取触发事件的DOM元素
      const target = event.target;
      // 判断是否为td元素，并且内容不为空
      if (target.nodeName === 'TD' && target.textContent.trim() !== '') {
        // 使用uni.setClipboardData将内容设置到剪贴板
        uni.setClipboardData({
          data: target.textContent,
          success: () => {
            console.log('复制成功');
            // 可以添加用户提示复制成功
          },
          fail: () => {
            console.log('复制失败');
            // 可以添加用户提示复制失败
          }
        });
      }
    },
    sizeChange(val){
      console.log(val)
      this.page.limit = val
      this.page.page = 1
      this.data = []
      this.getList()
    },
    searchHandle(){
      this.page.page = 1
      this.data = []
      this.getList()
    },
    clearHandle(){
      this.page.page = 1
      this.searchForm = {}
      this.data = []
      this.getList()
    },
    getList(){
      mRequest.inspectStudentList({
        limit: this.page.limit,
        page: this.page.page,
        name: this.searchForm.name,
        inspectId: hccmStore.getChooseInspectId()
      }).then(res=>{
        this.data = res.data.records
        console.log(this.data)
        this.page.total = res.data.total
      })
    },
    pullUpLoadingAction(){
      if(this.page.total <= this.page.limit * this.page.page){
	      return
	    }else{
        this.page.page ++ 
        this.getList()
      }
    },
  },
  onLoad(){
    this.getList()
    console.log(hccmStore.getChooseInspectId())
  }
}
</script>
<style lang='scss'>
.studentList{
  display: flex;
  height: calc(100vh - 1px);
  flex-direction: column;
  padding: 100px 20px 30px;
  box-sizing: border-box;
  .top{
    height: auto;
    width: 100%;
    .search-top{
      font-size: 14px;
      // overflow-x: auto;
      flex-wrap: wrap;
      display: flex;
      .inner{
        flex: 0 0 200px; /* 确保每个子元素有固定宽度 */
        display: inline-block;
        padding-right: 20px;
        padding-bottom: 10px;
        .inner-box{
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .search-bot{
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .bot{
    flex: 1;
    // height: calc(100vh - 100px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    .page-box{
      height: 50px;
      width: 100%;
      display: flex;
      align-items: flex-end;
    }
  }
  ::deep(.ua__thead-th){
    font-size: 16px !important;
    height: 40px;
    line-height: 40px;
  }
  ::deep(.ua__tbody-td){
    font-size: 14px !important;
    height: 34px;
    line-height: 34px;
  }
}
</style>